<template>
	<!-- 退款页面 -->
	<view class="refund">
		<view class="goodsinfo">
			<view class="image">
				<image src="../../static/order/luimg.png" style="width: 90px;height: 90px;"></image>
			</view>

			<view class="goodsname">车载小鹿首饰架摆件鹿角树形耳钉首饰展示架耳环架手链饰品收纳首饰挂件</view>
			<view class="goodsprice">
				<view style="margin-bottom: 20px;">￥13.00</view>
				<text> x1 </text>
			</view>
		</view>
		<view class="goodsinfomiddle">
			<view class="middletitle">
				<view class="middle-left">
					退款件数
				</view>
				<view class="middle-right">
					1
					<!-- {{refundList.num}} -->
				</view>
			</view>
			<view class="middletitle">
				<view class="middle-left">
					退款金额
				</view>
				<view class="middle-right">
					￥13.00
					<!-- {{refundList.price}} -->
				</view>
			</view>
			<view class="middleaddress">

				<view>
					<u-action-sheet :show="show2" @close="show2 = false" :actions="actions2" cancelText="取消">
						<u-button @click="show = true">打开ActionSheet</u-button>
					</u-action-sheet>
				</view>

			</view>
			<view class="middleshow">
				<view class="middleshow-left">
					备注说明
				</view>
				<view class="middleshow-right">
					<u--textarea v-model="value1" placeholder="填写备注信息,100字以内" border="none"></u--textarea>
				</view>

			</view>
			<view class="middleimg">
				<view class="middle-pht1">
					上传凭证
				</view>
				<view class="middle-pht2">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" 
					name="1" multiple   :maxCount="10"></u-upload>
				</view>
			</view>
			<view class="middlebtn">
				<u-modal :show="show" @confirm="confirm" :title="title" ref="uModal" :asyncClose="true"></u-modal>
				<button class="middlebtn-test"@click="showModal" @confirm="confirm">申请退款</button>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {

			refundList: {
				type: Object,
				default: () => {

				}
			}
		},
		data() {
			return {
				
				title: '标题',
				show2: false,
				fileList1: [],
				show: false,
				title: '退款申请成功',
				
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				// this[`fileList${event.name}`].splice(event.index, 1)
			},
			afterRead(){
				
			},
			// 新增图片
			// async afterRead(event) {
			// 	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			// 	let lists = [].concat(event.file)
			// 	let fileListLen = this[`fileList${event.name}`].length
			// 	lists.map((item) => {
			// 		this[`fileList${event.name}`].push({
			// 			...item,
			// 			status: 'uploading',
			// 			message: '上传中'
			// 		})
			// 	})
			// 	for (let i = 0; i < lists.length; i++) {
			// 		const result = await this.uploadFilePromise(lists[i].url)
			// 		let item = this[`fileList${event.name}`][fileListLen]
			// 		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			// 			status: 'success',
			// 			message: '',
			// 			url: result
			// 		}))
			// 		fileListLen++
			// 	}
			// },
			//  uploadFilePromise(url) {
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			// 			filePath: url,
			// 			name: 'file',
			// 			formData: {
			// 				user: 'test'
			// 			},
			// 			success: (res) => {
			// 				setTimeout(() => {
			// 					resolve(res.data.data)
			// 				}, 500)
							
			// 			}
			// 		});
			// 	})
			// },
			// 退款按钮
			showModal() {
						this.show = true;
					},
			confirm() {
						setTimeout(() => {
							this.show = false;
							uni.navigateTo({
								url:'/pages/orderinfo/orderpay'
							})
							
						}, 300)
						
					}
					
		}

	}
</script>

<style lang="scss">
	.refund {
		background-color: #f3f3f3;
		height: 100vh;
		width: 100%;
		padding-top: 20px;

	}

	.goodsinfo {
		margin: auto;
		width: 90%;
		display: flex;
		text-align: center;
		padding: 10px;
		background-color: white;
		border-radius: 10px;

		.image {
			flex: 1;

			img {
				width: 40px;
				height: 60px;
			}
		}

		.goodsname {
			text-align: left;
			flex: 3;
			font-size: 16px;
			padding: 10px 10px;

		}

		.goodsprice {
			flex: 1;
			font-size: 14px;
			color: #c6c6c6;
		}

	}

	.goodsinfomiddle {
		background-color: white;
		width: 90%;
		margin: 10px auto;
		padding: 10px;
		border-radius: 10px;

		.middletitle {
			display: flex;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-bottom: 1px solid #ccc;

			.middle-left {
				flex: 1;
				text-align: left;
			}

			.middle-right {
				flex: 1;
				text-align: right;
			}

		}

		.middleshow {
			display: flex;
			padding-top: 10px;
			border-bottom: 1px solid #ccc;

			.middleshow-left {
				flex: 1;
			}

			.middleshow-right {
				flex: 2;
			}
		}

		.middleimg {
			padding: 10px 10px;

			.middle-pht2 {
				margin-top: 20px;
			}
		}

		.middlebtn {
			padding: 20px 10px;

			.middlebtn-test {
				background-color: red;
				border-radius: 25px;
				color: white;
			}
		}

	}
</style>
